<template>
	<view class="goods">
		<section class="goods-header">
			<view class="header-left">
				<view class="shop-name">
					<image src="/static/icon_tank.svg" style="width: 25px;height: 25px;margin-right: 5px;transform: translateY(3px);" mode=""></image>
					<span>Tank Burger</span>
				</view>
				<view class="distance">距离您1.2km</view>
			</view>

			<view class="radio-box">
				<view class="sliding-block" :style="{left: postage_type == 2 ? '85rpx' : '6rpx'}">{{postage_type == "1" ? '自提' : '外卖'}}</view>
				<view :class="postage_type == 1 ? 'radio-item active' : 'radio-item' " @click="handle_change_postage_type(1)">自提</view>
				<view :class="postage_type == 2 ? 'radio-item active' : 'radio-item' " @click="handle_change_postage_type(2)">外卖</view>
			</view>
		</section>

		<section class="notice">
			<view class="notice-left">
				<image src="../../../static/goods/icon_notice.svg" style="width: 15px;height: 15px;transform: translateY(2px);" mode=""></image>
				商家暂无公告
			</view>

			<view class="notice-right" @click="notice_visible = true">
				更多
				<image src="../../../static/goods/icon_down_arrow.svg" style="width: 13px;height: 13px;transform: translateY(1px);" mode=""></image>
			</view>
		</section>

		<section class="goods-list">
			<view class="goods-menu">
				<view :class="current_goods_menu_indent == _menu_index ? 'menu-cell active' : 'menu-cell'" v-for="(_menu, _menu_index) in goods_list" :key="_menu_index" @click="handle_goods_menu_change(_menu_index)" >{{_menu.title}}</view>
			</view>
			
			<view class="goods-content">
				<view class="goods-item" v-for="(_item, _index) in goods_list[current_goods_menu_indent]?.list" :key="_index">
					<view class="goods-cover">
						<image :src="
							_item.goods_name == '经典安格斯牛肉汉堡' ? '/static/goods/burger1.png' :
							_item.goods_name == '秘制鸡腿堡' ? '/static/goods/burger2.jpg' :
							_item.goods_name == '辣肉酱牛肉汉堡' ? '/static/goods/burger3.jpg' :
							_item.goods_name == '猛男汉堡' ? '/static/goods/burger4.jpg' :
							_item.goods_name == '黑凤梨' ? '/static/goods/burger5.jpg' :
							_item.goods_name == '培根牛肉芝士堡' ? '/static/goods/burger6.png' :
							_item.goods_name == '脆薯饼牛肉芝士堡' ? '/static/goods/burger7.png' :
							_item.goods_name == '全麦洋葱堡' ? '/static/goods/burger8.jpg' :
							_item.goods_name == '能量炸弹双层厚牛堡' ? '/static/goods/burger9.png' :
							_item.goods_name == '巨无霸' ? '/static/goods/burger10.jpg' :
							_item.goods_name == '美式粗薯条' ? '/static/goods/pellet1.png' :
							_item.goods_name == '蒜香大薯角' ? '/static/goods/pellet2.jpg' :
							_item.goods_name == '脆薯饼' ? '/static/goods/pellet3.png' :
							_item.goods_name == '秘制烤鸡翅' ? '/static/goods/pellet4.jpg' :
							_item.goods_name == '劲爆鸡米花' ? '/static/goods/pellet5.jpg' :
							_item.goods_name == '爆汁杏鲍菇' ? '/static/goods/pellet6.png' :
							_item.goods_name == '脆皮鸡块' ? '/static/goods/pellet7.png' :
							_item.goods_name == '蛋挞' ? '/static/goods/pellet8.jpg' :
							_item.goods_name == '可乐' ? '/static/goods/drink1.jpg' :
							_item.goods_name == '雪碧' ? '/static/goods/drink2.jpg' : ''
						" style="width: 100%;height: 100%;border-radius: 4px;" mode=""></image>
					</view>
					<view class="goods-info">
						<view class="goods-name">
							{{ _item.goods_name }}
						</view>
						<view class="goods-desc">
							{{_item.goods_desc}}
						</view>
						<view class="goods-num">
							<span style="margin-right: 50rpx;">销量{{_item.solds_num || 0}}</span>
							<span>库存{{_item.stocks || 0}}</span>
						</view>
						<view class="goods-operation">
							<view class="goods-price">￥{{_item.price || 0}}</view>
							<view class="goods-btn" @click="handle_select_current_good(_item)">
								选择
							<!-- 	<view class="selected-num">
									0
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>

		</section>

		<section class="balance">
			<view class="balance-info" @click="handle_open_cart">
				<view class="cart-icon">
					<image src="/static/goods/icon_cart.svg" style="width: 30px;height: 30px;" mode=""></image>
					<view class="dot" v-if="data_cart_amount > 0">{{ data_cart_amount }}</view>
				</view>

				<view class="price-box">
					<view class="price">￥{{ data_cart_total }}</view>
					<view class="postage">
						{{postage_type == "1" ? "支持自取" : `配送费￥${postage_fee}`}}
					</view>
				</view>
			</view>

			<view class="balance-btn">
				<up-button color="#333333" :customStyle="{height: '100%',borderRadius: 0}" @click="handle_balance()" text="去结算"></up-button>
			</view>
		</section>

		<!-- 商家公告 -->
		<u-popup :show="notice_visible" @close="notice_visible = false" @open="notice_visible = true">
			<view class="notice-window">
				<view class="notice-title">
					Tank Burger
				</view>
				<view class="notice-cell">
					<view class="notice-cell-title">
						公告
					</view>
					<view class="notice-cell-desc">
						商家暂无公告
					</view>
				</view>

				<view class="notice-cell">
					<view class="notice-cell-title">
						配送信息
					</view>
					<view class="notice-cell-desc">
						满30元起送，支持到店自取；<br />
						由商户自配送提供配送服务，免配送费。
					</view>
				</view>

				<view class="notice-cell">
					<view class="notice-cell-title">
						门店信息
					</view>
					<view class="notice-cell-desc">
						营业时间: 10:00 ~ 18:00 <br />
						联系电话: 19357618894 &nbsp;&nbsp;&nbsp; vx: zheshan0215
						门店地址: 郎溪县实验小学斜对面
					</view>
				</view>

				<u-icon name="phone-fill" class="notice-call-me" @click="handle_call_me"></u-icon>
			</view>
		</u-popup>
		
		
		<!-- 选择规格 -->
		<u-popup :show="goods_spec_select_visible" round="15" closeable="true" @close="goods_spec_select_visible = false" @open="goods_spec_select_visible = true">
			<view class="spec-window">
				<view class="goods-info">
					<img class="goods-cover" :src="
						current_select_goods_info?.goods_name == '经典安格斯牛肉汉堡' ? '/static/goods/burger1.png' :
						current_select_goods_info?.goods_name == '秘制鸡腿堡' ? '/static/goods/burger2.jpg' :
						current_select_goods_info?.goods_name == '辣肉酱牛肉汉堡' ? '/static/goods/burger3.jpg' :
						current_select_goods_info?.goods_name == '猛男汉堡' ? '/static/goods/burger4.jpg' :
						current_select_goods_info?.goods_name == '黑凤梨' ? '/static/goods/burger5.jpg' :
						current_select_goods_info?.goods_name == '培根牛肉芝士堡' ? '/static/goods/burger6.png' :
						current_select_goods_info?.goods_name == '脆薯饼牛肉芝士堡' ? '/static/goods/burger7.png' :
						current_select_goods_info?.goods_name == '全麦洋葱堡' ? '/static/goods/burger8.jpg' :
						current_select_goods_info?.goods_name == '能量炸弹双层厚牛堡' ? '/static/goods/burger9.png' :
						current_select_goods_info?.goods_name == '巨无霸' ? '/static/goods/burger10.jpg' :
						current_select_goods_info?.goods_name == '美式粗薯条' ? '/static/goods/pellet1.png' :
						current_select_goods_info?.goods_name == '蒜香大薯角' ? '/static/goods/pellet2.jpg' :
						current_select_goods_info?.goods_name == '脆薯饼' ? '/static/goods/pellet3.png' :
						current_select_goods_info?.goods_name == '秘制烤鸡翅' ? '/static/goods/pellet4.jpg' :
						current_select_goods_info?.goods_name == '劲爆鸡米花' ? '/static/goods/pellet5.jpg' :
						current_select_goods_info?.goods_name == '爆汁杏鲍菇' ? '/static/goods/pellet6.png' :
						current_select_goods_info?.goods_name == '脆皮鸡块' ? '/static/goods/pellet7.png' :
						current_select_goods_info?.goods_name == '蛋挞' ? '/static/goods/pellet8.jpg' :
						current_select_goods_info?.goods_name == '可乐' ? '/static/goods/drink1.jpg' :
						current_select_goods_info?.goods_name == '雪碧' ? '/static/goods/drink2.jpg' : ''
					" alt="" />
					<view class="goods-info-detail">
						<view class="goods-info-name">
							{{ current_select_goods_info?.goods_name }}
						</view>
						<view class="goods-info-desc">
							产品描述
						</view>
						<view class="goods-info-desc">
							{{ current_select_goods_info?.goods_desc }}
						</view>
					</view>
				</view>
				
				<view class="spec-select-box">
			<!-- 		<view class="sauce spec-select">
						<view class="spec-select-title">
							酱料
						</view>
						<view class="sauce-list">
							<view class="sauce-item">番茄</view>
							<view class="sauce-item">番茄</view>
							<view class="sauce-item">番茄</view>
							<view class="sauce-item">番茄</view>
							<view class="sauce-item">番茄</view>
							<view class="sauce-item">番茄</view>
						</view>
					</view> -->
					
					<view class="snack spec-select">
						<view class="spec-select-title">
							加料
						</view>
						<view class="snack-list">
							<view :class="current_spec_select_index.includes(_index+1) ? 'snack-item active' : 'snack-item' " v-for="(_item, _index) in snack_list" :key="_index" 
									@click="handle_spec_select(_item ,_index+1)">
								{{_item.name}}&nbsp;&nbsp;<span style="color: #8a2829">&yen;{{_item.price}}</span>
							</view>

						</view>
					</view>
				</view>
				
				<view class="spec-footer">
					<view class="spec-snack">
						<view class="spec-snack-left">
							<view class="spec-snack-desc" style="color: #333333">
								加料 + ￥{{ Number(current_select_goods_info?.goods_pellet_price) * Number(current_select_goods_info?.amount) }}
							</view>
							<view class="spec-snack-desc">
								{{ current_select_goods_info?.goods_pellet }}
							</view>
						</view>
						
						<view class="spec-snack-right">
							<!-- <up-number-box :value="current_order_item_amount" integer min="1" max="1000" @change="current_select_goods_num_change"></up-number-box> -->
							
							<view :class="current_order_item_amount > 1 ? 'dec' : 'dec disabled'" @click="current_good_dec(_item)">
								<up-icon name="minus" :color="current_order_item_amount <= 1 ? '#c8c9cc' : '#323233'"></up-icon>
							</view>
							<input class="up-number-box" type="number" disabled="true" :value="current_order_item_amount" />
							<view :class="current_order_item_amount < 1000 ? 'inc' : 'inc disabled'" @click="current_good_inc(_item)">
								<up-icon name="plus"  :color="current_order_item_amount >= 1000 ? '#c8c9cc' : '#323233'"></up-icon>
							</view>
		
						</view>
					</view>
					
					<view class="spec-btn">
						<up-button color="#333333" :customStyle="{height: '100%',borderRadius: 100}" @click="handle_add_to_cart" text="加入购物车"></up-button>
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- 已选商品预览 -->
		<!-- 选择规格 -->
		<u-popup :show="goods_had_select_visible" round="15" mode="bottom" @close="handle_close_cart()" @open="goods_had_select_visible = true">
			<view class="select-goods">
				<view class="select-goods-header">
					<span style="font-size: 28rpx;color: #333333">已选商品</span>
					<span style="font-size: 26rpx;color: #999999;z-index: 1000" @click="handle_clear_cart()">清空购物车</span>
				</view>
				
				<view class="select-goods-content">
					<view class="select-goods-card" v-for="(_item, _index) in data_cart" :key="_index">
						<img class="select-goods-cover" :src="
							_item?.goods_name == '经典安格斯牛肉汉堡' ? '/static/goods/burger1.png' :
							_item?.goods_name == '秘制鸡腿堡' ? '/static/goods/burger2.jpg' :
							_item?.goods_name == '辣肉酱牛肉汉堡' ? '/static/goods/burger3.jpg' :
							_item?.goods_name == '猛男汉堡' ? '/static/goods/burger4.jpg' :
							_item?.goods_name == '黑凤梨' ? '/static/goods/burger5.jpg' :
							_item?.goods_name == '培根牛肉芝士堡' ? '/static/goods/burger6.png' :
							_item?.goods_name == '脆薯饼牛肉芝士堡' ? '/static/goods/burger7.png' :
							_item?.goods_name == '全麦洋葱堡' ? '/static/goods/burger8.jpg' :
							_item?.goods_name == '能量炸弹双层厚牛堡' ? '/static/goods/burger9.png' :
							_item?.goods_name == '巨无霸' ? '/static/goods/burger10.jpg' :
							_item?.goods_name == '美式粗薯条' ? '/static/goods/pellet1.png' :
							_item?.goods_name == '蒜香大薯角' ? '/static/goods/pellet2.jpg' :
							_item?.goods_name == '脆薯饼' ? '/static/goods/pellet3.png' :
							_item?.goods_name == '秘制烤鸡翅' ? '/static/goods/pellet4.jpg' :
							_item?.goods_name == '劲爆鸡米花' ? '/static/goods/pellet5.jpg' :
							_item?.goods_name == '爆汁杏鲍菇' ? '/static/goods/pellet6.png' :
							_item?.goods_name == '脆皮鸡块' ? '/static/goods/pellet7.png' :
							_item?.goods_name == '蛋挞' ? '/static/goods/pellet8.jpg' :
							_item?.goods_name == '可乐' ? '/static/goods/drink1.jpg' :
							_item?.goods_name == '雪碧' ? '/static/goods/drink2.jpg' : ''
						" />
						<view class="select-goods-card-right">
							<view class="select-goods-info">
								<view class="select-goods-info-desc">
									{{_item?.goods_name}} <br>
									<span style="font-size: 26rpx;color: #999999">+ {{_item?.goods_pellet}}</span>
								</view>
								
								<view class="select-goods-info-desc">
									￥{{_item?.total_price}}
								</view>
							</view>
							
							<view class="select-goods-up-number">
								<view :class="_item.amount > 1 ? 'dec' : 'dec disabled'" @click="dec(_item)">
									<up-icon name="minus" :color="_item.amount <= 1 ? '#c8c9cc' : '#323233'"></up-icon>
								</view>
								<input class="up-number-box" type="number" disabled="true" :value="_item?.amount" />
								<view :class="_item.amount < 1000 ? 'inc' : 'inc disabled'" @click="inc(_item)">
									<up-icon name="plus"  :color="_item.amount >= 1000 ? '#c8c9cc' : '#323233'"></up-icon>
								</view>

							</view>
						</view>
					</view>
					

				</view>
				
				<view class="select-goods-footer">
					<span style="font-size: 28rpx;margin-right: 60rpx">包装费</span>
					<span style="font-size: 26rpx">￥0</span>
				</view>
			</view>
		</u-popup>
		
		
		
	</view>
	<tabBar></tabBar>
	
</template>

<script setup>
	import tabBar from "../components/tab_bar.vue"
	import {
		ref,reactive, onMounted,
	} from "vue"
	import { get_goods } from "../common/api";
	
	
	const postage_type = ref(1); // 1自取 2外卖
	// 切换自提外卖
	const handle_change_postage_type = (type) => {
		postage_type.value = type
	}
	onMounted((option) => {
		if(option?.type && option?.type != "") postage_type.value = option.type == "TS" ? 1 : option.type == "WS" ? 2 : ''
		
		// 加载所有商品
		fetch_goods()
	})
	
	
	
	
	const postage_fee = ref(4);
	const notice_visible = ref(false);
	
	/* 选择商品加入购物车 */
	const goods_spec_select_visible = ref(false);
	/* 当前订单项的数量 */
	const current_order_item_amount = ref(1);
	/* 当前点击选择选中的商品缓存信息 */
	const current_select_goods_info = ref(null);
	// 创建订单项信息
	const handle_select_current_good = (good) => {
		
		// 重置当前订单项的数量和上次选中的加料&当前商品默认的数量
		current_order_item_amount.value = 1;
		current_spec_select_index.value = [];
		// 初始化订单项内容
		current_select_goods_info.value = {
			...good,
			total_price: good.price,
			goods_pellet: "",
			goods_pellet_price: 0,	// 加料总价
			amount: 1
		}
		goods_spec_select_visible.value = true;
	}
	// 修改订单项数量
	// const current_select_goods_num_change = (e) => {
	// 	// 商品单价
	// 	let main_price = Number(current_select_goods_info.value.price);
	// 	// 加料总价
	// 	let pellet_price = Number(current_select_goods_info.value.goods_pellet_price);
	// 	current_order_item_amount.value = e.value;
	// 	current_select_goods_info.value.amount = e.value;
	// 	current_select_goods_info.value.total_price = Number(e.value) * (main_price + pellet_price)
	// }
	
	// 选择商品 --- 减少商品数量
	const current_good_dec = () => {
		if(Number(current_order_item_amount.value) <= 1) { return }; 
		current_order_item_amount.value --
		// 商品单价
		let main_price = Number(current_select_goods_info.value.price);
		// 加料总价
		let pellet_price = Number(current_select_goods_info.value.goods_pellet_price);
		// 商品总数
		let amount = Number(current_order_item_amount.value)
		current_select_goods_info.value.amount = current_order_item_amount.value
		current_select_goods_info.value.total_price = amount * (main_price + pellet_price)
	}
	// 选择商品 --- 增加商品数量
	const current_good_inc = () => {
		if(Number(current_order_item_amount.value) >= 1000) { return }; 
		current_order_item_amount.value ++
		// 商品单价
		let main_price = Number(current_select_goods_info.value.price);
		// 加料总价
		let pellet_price = Number(current_select_goods_info.value.goods_pellet_price);
		// 商品总数
		let amount = Number(current_order_item_amount.value)
		current_select_goods_info.value.amount = current_order_item_amount.value
		current_select_goods_info.value.total_price = amount * (main_price + pellet_price)
	}
	
	/* 已选择商品列表购物车 */
	const goods_had_select_visible = ref(false);

	/* 当前选中商品购物车缓存数据(存储到缓存里前往结算页面生成订单) */
	let data_cart = reactive([]);
	const data_cart_amount = ref(0);	// 购物车商品总数
	const data_cart_total = ref(0);		// 购物车商品总价	

	// 购物车商品加减数量
	// const handle_item_amount_change = (e, item) => {
	// 	// current_select_goods_info.value.amount = e.target.value
	// 	item.amount = e.target.value
	// }

	// 微信调起手机电话
	const handle_call_me = () => {

	}
	
	// 选择加料规格
	const snack_list = ref([])
	const current_spec_select_index = ref([])
	const handle_spec_select = (item, index) => {
		if(current_spec_select_index.value.includes(index)) {
			current_spec_select_index.value = current_spec_select_index.value.filter(i => i !== index);
			// 将当前加料小食项从选购商品订单项上去除
			current_select_goods_info.value.goods_pellet = current_select_goods_info.value.goods_pellet.replace(`${item.name},`, "");
			current_select_goods_info.value.goods_pellet_price -= Number(item.price);
			current_select_goods_info.value.total_price -= Number(item.price) * Number(current_select_goods_info.value.amount)
			return
		}
		current_spec_select_index.value.push(index)
		
		// 将加料小食添加到订单项上
		current_select_goods_info.value.goods_pellet += `${item.name},`
		current_select_goods_info.value.goods_pellet_price += Number(item.price);	// 单个订单项的所有加料总价
		current_select_goods_info.value.total_price += Number(item.price) * Number(current_select_goods_info.value.amount)
		
	}
	
	// 打开购物车预览
	const handle_open_cart = () => {
		if(data_cart && data_cart.length > 0){
			goods_had_select_visible.value = true
		}
		
	}
	
	// 关闭购物车
	const handle_close_cart = () => {
		// 更新商品总数和总价
		let total_price = 0;
		let total_amount = 0;
		for(let i=0; i<data_cart.length; i++){
			total_price += Number(data_cart[i].total_price)
			total_amount += Number(data_cart[i].amount)
		}
		data_cart_amount.value = total_amount
		data_cart_total.value = total_price
		goods_had_select_visible.value = false;
	}
	
	// 购物车预览 增加&减少商品
	const dec = (item) => {
		if(item.amount <= 1) { return }
		item.amount --
		// 计算订单项总价	减少一个商品就减去该订单项上所有的加料总价和商品单价
		item.total_price -= (Number(item.goods_pellet_price) + Number(item.price))
	}
	
	const inc = (item) => {
		if(item.amount >= 1000) { return }
		item.total_price += (Number(item.goods_pellet_price) + Number(item.price))
		item.amount ++
	}
	
	// 清空购物车
	const handle_clear_cart = () => {
		uni.showModal({
			title: '温馨提示',
			content: '是否确认清空购物车?',
			success: function (res) {
				if (res.confirm) {
					data_cart = [];
					data_cart_amount.value = 0;
					data_cart_total.value = 0;
					goods_had_select_visible.value = false;
					uni.showToast({
						title: '已为您清空购物车',
						duration: 2000
					});
				} else if (res.cancel) {
					
				}
			}
		});
	}
	
	// 加入购物车，将订单项加入购物车
	const handle_add_to_cart = () => {
		// 1. 订单项推入栈 （如果栈中存在商品，则更新数量，如果不存在则推入栈）
		let temp = 0;
		let length = data_cart.length
		if(length > 0) for(let i=0; i<length; i++){
			// 如果选择了两个完全一样的商品且加料种类总价完全一样，则合并为一个订单项，反之为两个订单项 (区分相同的商品加料不同的情况)
			if(data_cart[i].goods_id == current_select_goods_info.value.goods_id 
					&& (Number(data_cart[i].total_price) == Number(current_select_goods_info.value.total_price))){
				data_cart[i].amount += current_select_goods_info.value.amount
				data_cart[i].total_price += current_select_goods_info.value.total_price
				temp ++
			}
		}
		// length > 0 && data_cart.forEach((item: any, index: number) => {
		// 	if(item.goods_id == current_select_goods_info.value.goods_id) {
		// 		item.amount = current_select_goods_info.value.amount
		// 		temp ++
		// 	}
		// })
		temp <= 0 && data_cart.push(current_select_goods_info.value)
		
		// 2. 计算购物车总数
		data_cart_amount.value += Number(current_select_goods_info.value.amount);
		// 3. 计算购物车总价
		data_cart_total.value += Number(current_select_goods_info.value.total_price)
		
		goods_spec_select_visible.value = false
	}
	
	// 去结算
	const handle_balance = () => {
		// 将订单项列表存入缓存，生成预订单状态
		uni.setStorageSync('order_info', {
			order_items: data_cart,
			total_amount: data_cart_amount.value,
			total_price: data_cart_total.value
		});
		
		uni.redirectTo({
			url: "/pages/Tank/balance/index",
			animationType: "pop-in",
			animationDuration: 300
		});
		
	}
	

	const goods_list = ref([]);		// 商品列表
	const current_goods_menu_indent = ref(0); 	// 当前商品菜单栏选中项
	const handle_goods_menu_change = (index) => {
		current_goods_menu_indent.value = index
	}
	
	// 加载所有产品
	const fetch_goods = () => {
		get_goods({}).then((res) => {
			// 建立商品菜单树
			let burger = []
			let snack = []
			let drinks = []
			res.forEach((item) => {
				if(item.goods_type == "burger") burger.push(item)
				if(item.goods_type == "snack") snack.push(item)
				if(item.goods_type == "drinks") drinks.push(item)
				if(item.goods_type == "pellet" && item.stocks > 0) snack_list.value.push({
					name: item.goods_name,
					price: item.price
				})
			})
			goods_list.value = [
				{
					title: "美式汉堡",
					list: burger
				},
				{
					title: "精品小食",
					list: snack
				},
				{
					title: "饮料",
					list: drinks
				},
			]
			
			
			
		})
	}
	
</script>

<style lang="scss" scoped>
	.goods {
		width: 100%;
		height: 100%;

		.goods-header {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			align-items: center;


			.header-left {
				width: fit-content;
				min-width: 200rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.shop-name{
					font-size: 17px;
					font-weight: 550;
					color: #333333;
					margin-top: 4px;
	
				}
				.distance{font-size: 14px;color: #999999}
			}
			
			.radio-box{
				width: 170rpx;
				height: 55rpx;
				border-radius: 60rpx;
				background-color: #f6f6f6;
				display: flex;
				position: relative;
				padding: 0 2px;
				border: 1px solid #999999;
				
				.sliding-block{
					position: absolute;
					left: 6rpx;
					top: 4rpx;
					width: 90rpx;
					height: 48rpx;
					border-radius: 60rpx;
					background-color: #333333;
					color: #fff;
					font-size: 14px;
					display: flex;;
					align-items: center;;
					justify-content: center;
					transition: 0.3s;
				}
				
				.radio-item{
					flex: 1;
					font-size: 14px;
					color: #999999;
					display: flex;;
					align-items: center;;
					justify-content: center;
				}
			}


		}
		
		.notice{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			font-size: 13px;
			color: #999999;
		}
		
		.balance{
			width: 100%;
			height: 110rpx;
			background-color: #f0f0f0;
			padding-left: 15px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			
			.balance-info{
				width: 300rpx;
				height: 100%;
				display: flex;;
				justify-content: flex-start;
				align-items: center;
				padding: 20rpx 0;
				box-sizing: border-box;
				font-size: 14px;
				
				.cart-icon{
					width: 115rpx;
					height: 115rpx;
					background-color: #fff;
					border-radius: 100%;
					display: flex;
					align-items: center;;
					justify-content: center;
					position: relative;
					transform: translateY(-10rpx);
					
					
					.dot{
						position: absolute;
						top: -5rpx;
						right: 0;
						width: 37rpx;
						height: 37rpx;
						font-size: 12px;
						background-color: #333333;
						display: flex;;
						align-items: center;;
						justify-content: center;;
						color: #fff;
						border-radius: 100%;
					}
				}
				
				.price-box{
					width: fit-content;
					height: 100%;
					font-size: 14px;
					color: #999999;
					margin-left: 30rpx;
					display: flex;
					flex-direction: column;;
					justify-content: space-between;
					
					.price{
						font-size: 17px;
						color: #333333;
					}
				}
			}
			
			.balance-btn{
				width: 220rpx;
				height: 100%;
			}
		}
		
		.goods-list{
			width: 100%;
			height: calc(100vh - 410rpx);
			display: flex;
			
			.goods-menu{
				width: 200rpx;
				height: 100%;
				display: flex;;
				flex-direction: column;;
				justify-content: flex-start;
				background-color: #f6f6f6;
				overflow-y: scroll;
				
				.menu-cell{
					width: 100%;
					height: 120rpx;
					font-size: 14px;
					color: #999999;
					display: flex;;
					align-items: center;;
					justify-content: center;
					border-left: 3px solid #f6f6f6;
					transition: 0.2s;
				}
				
				.menu-cell.active{
					color: #333333;
					background-color: #fff;
					border-left: 3px solid #333333;
				}
			}
			
			.goods-content{
				width: calc(100% - 200rpx);
				height: 100%;
				display: flex;;
				flex-direction: column;;
				justify-content: flex-start;
				overflow-y: scroll;
				
				.goods-item{
					width: 100%;
					height: fit-content;;
					padding: 0 20rpx;
					margin-top: 40rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					
					.goods-cover{
						width: 180rpx;
						height: 180rpx;
						border-radius: 4px;
						background-color: #fff;
						// background-color: rgba(43,43,43,0.6);
					}
					
					.goods-info{
						width: calc(100% - 200rpx);
						height: fit-content;
						display: flex;;
						justify-content: flex-start;
						flex-direction: column;
						.goods-name{
							width: 100%;
							height: fit-content;
							font-size: 15px;
							color: #333333;
						}
						
						.goods-desc{
							width: 100%;
							height: fit-content;;
							line-height: 1.5;
							font-size: 12px;
							margin-top: 10rpx;
							color: #999999;
			
							// overflow: hidden;
							// white-space: nowrap;
							// text-overflow: ellipsis;
							
						}
						
						.goods-num{
							width: 100%;
							height: fit-content;
							font-size: 13px;
							color: #999999;
							margin-top: 10rpx;
							display: flex;
						}
						
						.goods-operation{
							width: 100%;
							height: 70rpx;
							display: flex;;
							justify-content: space-between;
							align-items: center;
							.goods-price{
								font-size: 16px;
								color: #333333;
							}
							
							.goods-btn{
								width: 100rpx;
								height: 45rpx;
								border-radius: 60rpx;
								font-size: 12px;
								color: #fff;
								display: flex;;
								align-items: center;;
								justify-content: center;
								position: relative;
								background-color: #333333;
								
								.selected-num{
									width: 30rpx;
									height: 30rpx;
									display: flex;;
									align-items: center;;
									justify-content: center;
									position: absolute;
									top: -10px;
									right: -3px;
									border: 1px solid #fff;
									font-size: 12px;
									color: #fff;
									background-color: #333333;
									border-radius: 100%;
								}
							}
						}
					}
					
				}
			}
		}
		
		
		.spec-window{
			width: 100%;
			height: 85vh;
			position: relative;
			
			
			.goods-info{
				width: calc(100% - 30px);
				height: fit-content;
				min-height: 200rpx;
				display: flex;
				justify-content: space-between;
				margin: 20px auto 20px;
				
				.goods-cover{
					width: 200rpx;
					height: 200rpx;
					border-radius: 30rpx;
					// background-color: #999999;
					background-color: #fff;
				}
				
				.goods-info-detail{
					width: calc(100% - 230rpx);
					height: 100%;
					
					.goods-info-name{
						width: 100%;
						height: fit-content;
						font-size: 32rpx;
						color: #333333;
						font-weight: 600;
					}
					
					.goods-info-desc{
						width: 100%;
						height: fit-content;
						line-height: 1.4;
						margin-top: 15rpx;
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
			
			.spec-select-box{
				width: calc(100% - 30px);
				height: fit-content;
				max-height: 550rpx;
				overflow-y: scroll;
				margin: 0 auto;
				
				.spec-select{
					width: 100%;
					height: fit-content;
					min-height: 50rpx;
					
					.spec-select-title{width: 100%;height: 50rpx;display: flex;align-items: center;color: #999999}
					.snack-list{
						width: 100%;
						height: fit-content;
						display: flex;
						flex-wrap: wrap;
						justify-content: flex-start;
						margin-top: 30rpx;
						
						.snack-item{
							min-width: 50rpx;
							width: fit-content;
							height: 70rpx;
							display: flex;
							padding: 0 30rpx;
							box-sizing: border-box;
							border-radius: 8rpx;
							background-color: #eee;
							color: #333333;
							transition: 0.3s;
							font-size: 13px;
							margin-right: 20rpx;
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.snack-item.active{
							background-color: #333333;
							color: #fff
						}
					}
				}
			}
			
			.spec-footer{
				width: 100%;
				height: fit-content;
				min-height: 230rpx;
				padding: 20rpx 30rpx 10rpx 30rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				bottom: 0;
				box-shadow: 0px 0 10px 10px #f8f8f8;
				
				.spec-snack{
					width: 100%;
					height: fit-content;
					min-height: 90rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.spec-snack-left{
						width: 80%;
						height: 100%;
						display: flex;
						flex-direction: column;;
						justify-content: space-between;
						
						.spec-snack-desc{
							fong-size: 18rpx;
							color: #999999;
						}
					}
				}
				
				.spec-btn{
					width: 100%;
					height: 80rpx;
					margin: 20rpx auto 0;
				}
				
			}
		}
		
		
		
		.select-goods{
			width: 100%;
			height: fit-content;
			
			.select-goods-header{
				width: 100%;
				height: 90rpx;
				padding: 0 30rpx;
				box-sizing: border-box;;
				border-bottom: #eee;
				display: flex;
				align-items: center;;
				justify-content: space-between;
				
			}
			
			.select-goods-content{
				width: 100%;
				height: fit-content;
				max-height: 70vh;
				overflow-y: scroll;
				border-bottom: 1px solid #eee;
				
				.select-goods-card{
					width: 100%;
					height: 220rpx;
					padding: 40rpx 30rpx;
					box-sizing: border-box;
					display: flex;;
					justify-content: space-between;
					
					.select-goods-cover{width: 140rpx;height: 140rpx;background-color: #fff;overflow: hidden;border-radius: 4rpx}
					.select-goods-card-right{
						width: calc(100% - 160rpx);
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						
						.select-goods-info{
							width: calc(100% - 240rpx);
							height: 100%;
							display: flex;;
							justify-content: space-between;
							flex-direction: column;
							
							.select-goods-info-desc{
								width: 100%;
								height: fit-content;
								font-size: 30rpx;
								color: #333333;
								
							}
						}
						
						
					}
					
				}
				
			}
			
			.select-goods-footer{
				width: 100%;
				height: 90rpx;
				padding: 0 30rpx;
				display: flex;;
				justify-content: flex-start;
				align-items: center;
				
				
			}
			
		}
		
		
		.select-goods-up-number, .spec-snack-right{
			width: 200rpx;
			height: 60rpx;
			display: flex;;
			// flex-direction: column;
			// justify-content: flex-end;
			justify-content: space-between;
			
			.dec, .inc, .up-number-box{
				width: 65rpx;
				height: 100%;
				display: flex;;
				align-items: center;;
				justify-content: center;
				text-align: center;
				background-color: #EBECEE;
				color: #323233;
			}
			
			.dec.disabled, .inc.disabled{
				background-color: #f7f8fa;
			}
			
			
		}
		
		.spec-snack-right{width: 220rpx;}
		
	}

	
</style>

